<template>
  <div class="app-container">
    <el-card class="card">
      <div slot="header">
        <p>基本信息</p>
        <el-form ref="interfaceForm" :rules="rules" :model="interfaceForm" label-width="80px" style="width: 600px; margin-left:50px;">
          <el-form-item label="测试项目" prop="project">
            <el-select v-model="interfaceForm.project" filterable placeholder="请选择" class="filter-item" value="">
              <el-option v-for="item in projectList" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item label="接口名称" prop="name">
            <el-input v-model="interfaceForm.name" />
          </el-form-item>
          <el-form-item label="请求方法" prop="method">
            <el-select v-model="interfaceForm.method" placeholder="请选择" value="temp.method">
              <el-option v-for="item in typeOptions" :key="item.index" :label="item.value" :value="item.index" />
            </el-select>
          </el-form-item>
          <el-form-item label="请求路径" prop="url">
            <el-input v-model="interfaceForm.url" />
          </el-form-item>
        </el-form>
      </div>
    </el-card>

    <el-card class="card">
      <div slot="header">
        <p>请求信息</p>
      </div>
      <el-tabs v-model="activeName" type="card">
        <el-tab-pane label="请求头部" name="headers">
          <el-button type="primary" icon="el-icon-plus" size="small" style="margin-bottom: 5px" @click="addHeader" />
          <el-table :data="headersList" border>
            <el-table-column label="参数名" prop="name">
              <template slot-scope="scope">
                <el-select v-model="scope.row.name" value="scope.row.name">
                  <el-option v-for="item in headerOptions" :key="item.index" :label="item.value" :value="item.index" />
                </el-select>
              </template>
            </el-table-column>
            <el-table-column label="参数值" prop="value">
              <template slot-scope="scope">
                <el-input v-model="scope.row.value" />
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button type="primary" size="small" @click="paramsBound(scope)">参数绑定</el-button>
                <el-button type="danger" size="small" @click="deleteParam(scope.$index, headersList)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="请求参数" name="params">
          <el-button type="primary" icon="el-icon-plus" size="small" style="margin-bottom: 5px" @click="addParams" />
          <el-table :data="paramsList" border>
            <el-table-column label="参数名" prop="name">
              <template slot-scope="scope">
                <el-input v-model="scope.row.name" />
              </template>
            </el-table-column>
            <el-table-column label="参数值" prop="value">
              <template slot-scope="scope">
                <el-input v-model="scope.row.value" />
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button type="danger" size="small" @click="deleteParam(scope.$index, paramsList)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </el-card>

    <el-card class="card">
      <div slot="header">
        <p>预期返回信息，设置返回信息</p>
      </div>
      <el-tabs v-model="returnActiveName" type="card">
        <el-tab-pane label="返回头部" name="returnHeaders">
          <el-button type="primary" icon="el-icon-plus" size="small" style="margin-bottom: 5px" @click="addResponseHeader()" />
          <el-table :data="returnListHeaders" border>
            <el-table-column label="参数名" prop="name">
              <template slot-scope="scope">
                <el-select v-model="scope.row.name" value="scope.row.name">
                  <el-option v-for="item in headerOptions" :key="item.index" :label="item.value" :value="item.index" />
                </el-select>
              </template>
            </el-table-column>
            <el-table-column label="参数说明" prop="detail">
              <template slot-scope="scope">
                <el-input v-model="scope.row.detail" />
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button type="danger" size="small" @click="deleteParam(scope.$index, returnListHeaders)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="返回结果" name="returnBody">
          <el-button type="primary" icon="el-icon-plus" size="small" style="margin-bottom: 5px" @click="addReturnListBodyItem" />
          <el-table
            :data="returnListBody"
            border
          >
            <el-table-column label="参数名" prop="name">
              <template slot-scope="scope">
                <el-input v-model="scope.row.name" />
              </template>
            </el-table-column>
            <el-table-column label="参数类型" prop="type">
              <template slot-scope="scope">
                <el-select v-model="scope.row.type">
                  <el-option v-for="item in returnParamsType" :key="item.index" :label="item.value" :value="item.index" />
                </el-select>
              </template>
            </el-table-column>
            <el-table-column label="参数路径" prop="path">
              <template slot-scope="scope">
                <el-input v-model="scope.row.path" />
              </template>
            </el-table-column>
            <el-table-column label="参数说明" prop="detail">
              <template slot-scope="scope">
                <el-input v-model="scope.row.detail" />
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button type="danger" size="mini" @click="deleteParam(scope.$index, returnListBody)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </el-card>

    <div slot="footer" class="dialog-footer" style="margin-top: 20px">
      <el-button @click="$router.back(-1)">
        取消
      </el-button>
      <el-button type="primary" @click="isEdit?updateData():createData()">确定</el-button>
    </div>
  </div>
</template>

<script>
import { getInterface, createInterface, updateInterface } from '@/api/interface'
import { methodOptions, headerOptions, returnParamsType } from '@/views/interface/config'
import { validJsonParams, addElement } from '@/views/interface/component/index'
import { getProjectList } from '@/api/project'
export default {
  name: 'InterfaceDetail',
  props: {
    isEdit: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      projectList: [],
      headersList: [],
      paramsList: [],
      returnListHeaders: [],
      returnListBody: [],
      activeName: 'params',
      returnActiveName: 'returnBody',
      paramsDialogVisible: false,
      tempRoute: {},
      interfaceId: 1,
      interfaceForm: {
        id: undefined,
        name: '',
        url: '',
        headers: '',
        params: '',
        method: 'get',
        project: undefined,
        remark: '',
        response_headers: '',
        response_params: ''
      },
      typeOptions: methodOptions,
      headerOptions: headerOptions,
      returnParamsType: returnParamsType,
      rules: {
        name: [{ required: true, message: '名称不能为空', trigger: 'change' }]
      }
    }
  },
  created() {
    this.interfaceId = this.$route.params && this.$route.params.id
    if (this.isEdit) {
      console.log(this.$route.params)
      this.fetchDate(this.interfaceId)
    } else {
      this.tempRoute = Object.assign({}, this.$route)
    }
    this.getProjects()
  },
  methods: {
    fetchDate(id) {
      getInterface(id).then((response) => {
        this.interfaceForm = response.data
        console.log('response.data.params:', response.data.params)
        this.paramsList = JSON.parse(response.data.params)
        this.headersList = JSON.parse(response.data.headers)
        this.returnListHeaders = validJsonParams(response.data.response_headers)
        this.returnListBody = validJsonParams(response.data.response_params)
      })
    },
    getProjects() {
      const params = {
        limit: 20,
        page: 1
      }
      getProjectList(params).then(response => {
        this.projectList = response.results
      })
    },
    collectForm() {
      this.interfaceForm.headers = JSON.stringify(this.headersList)
      this.interfaceForm.params = JSON.stringify(this.paramsList)
      this.interfaceForm.response_headers = JSON.stringify(this.returnListHeaders)
      this.interfaceForm.response_params = JSON.stringify(this.returnListBody)
    },
    createData() {
      console.log('创建step数据')
      this.collectForm()
      this.$refs.interfaceForm.validate(valid => {
        if (valid) {
          createInterface(this.interfaceForm).then((response) => {
            if (response) {
              console.log('创建step成功')
              this.$router.go(-1)
            }
          })
        }
      })
    },
    updateData() {
      console.log('更新step数据')
      this.collectForm()
      this.$refs.interfaceForm.validate(valid => {
        if (valid) {
          updateInterface(this.interfaceId, this.interfaceForm).then(response => {
            if (response) {
              this.$notify({
                title: '提示',
                message: '更新成功',
                type: 'success',
                duration: 2000
              })
              this.$router.go(-1)
            } else {
              this.$notify({
                title: '提示',
                message: '更新失败',
                type: 'error',
                duration: 1000
              })
            }
          })
        }
      })
    },
    deleteParam(index, rows) {
      console.log('删除参数')
      rows.splice(index, 1)
    },
    addHeader() {
      const headerItem = {
        name: '',
        value: ''
      }
      addElement(this.headersList, headerItem)
    },
    addParams() {
      const paramsItem = {
        name: '',
        type: '',
        value: ''
      }
      addElement(this.paramsList, paramsItem)
    },
    addResponseHeader() {
      const responseHeaderItem = {
        name: '',
        detail: ''
      }
      addElement(this.returnListHeaders, responseHeaderItem)
    },
    addReturnListBodyItem() {
      console.log('this.returnListBody:', this.returnListBody)
      const returnListBodyItem = {
        name: '',
        type: 'Object',
        detail: '',
        path: '$response'
      }
      addElement(this.returnListBody, returnListBodyItem)
    }
  }
}
</script>

<style scoped>

</style>
